<template>
  <div class="home">
    <img src="../assets/登录页-1.jpg" alt="" @click='fn'>
    <van-form @submit="onSubmit">
  <van-field
    v-model="username"
    name="账号"
    label="账号"

    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="password"
    type="password"
    name="密码"
    label="密码"
    
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">立即登录</van-button>
  </div>
</van-form>
  </div>
</template>

<script>
import {login,register} from '../request/api'
export default {
 data() {
    return {
      username: '',
      password: '',
      token:''
    };
  },
  created(){
   
   
  },
  
  methods: {fn(){
     //注册请求
       register({
      "phone":"13553717750",
"nickName":"糖加三勺",
"email":"6541322@163.com",
"password":"111111"
    }).then(res=>{
      console.log(res.data);
    })
  },
    onSubmit(values) {
      
      let arr=Object.values(values)
      this.username=arr[0]
      this.password=arr[1]
      console.log(this.password);
      
        //2.发送请求跳转页面，修改页面数据
      login({
username:this.username,
password:this.password
}).then(res=>{
  this.$router.push('/login')
   //3.保留token
  this.token=res.data
  localStorage.setItem('token',this.token)
  //1提示登录成功
      this.$toast('登录成功')
   console.log(res.data)
})
    },
  },
}
</script>

<style lang='less' scoped >
*{
    font-size: .16rem!important;
}
img{
  width: 100%;
  height: 100%;
  position: absolute;
  // position: relative;
  top:0
  
}
.van-form{
  width: 60%;
  
  position: relative;
  top: 3.8rem ;
  left: 20%;
  z-index: 2;
  .van-field{
    margin: .14rem 0;
   
    
    .van-field__label{
      color: black!important;
      margin: 0;
      width: .4rem;
     }
     
    
   
  }
  .van-button{
    background: #4267fe;
    width: 75%;
    height: .48rem;
    margin: .61rem auto;
    border: 2px solid black;
  }
  .van-cell{
    border-radius: .18rem;
     background: #ffcd33;
     height: .36rem;
    border-radius: .34rem;
     border: 2px solid black;
     line-height: 1;
  }
  // .van-cell__title{
  //   width: .3rem;
  // }
}
</style>  

